<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .menu{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 999999;
            display: none;
        }
    </style>
</head>
<body>
    <!-- <a href="javascript:alert(1111);">弹出</a>
    <a href="javascript:;">阻止刷新</a> -->
    <a href="https://www.baidu.com">跳转</a>

    <form action="">
        <p><label for="">用户名:</label><input type="text" name="user"></p>
        <p><label for="">密&emsp;码:</label><input type="text" name="pwd"></p>
        <p>
            <input type="submit" class="subBtn" value="注册">
            <input type="reset" class="canBtn" value="取消">
        </p>
    </form>
    <div class="menu">

    </div>
</body>
<script>
    // 浏览器的默认行为
    // 1. a标签的默认跳转
    // 2. 表单的默认提交
    // 3. f5的默认刷新
    // 3. 鼠标右键默认菜单

    // 阻止浏览器的默认行为   => 借助事件对象的方法
    // 1. 阻止a标签的默认跳转
    // 2. 阻止表单的默认提交
    // 3. 阻止f5的默认刷新
    // 4. 阻止鼠标右键默认菜单

    // 常规浏览器
    // e.preventDefault();
    // 低版本IE
    // e.returnValue = false;  // return false;

    // 兼容
    // if( e.preventDefault){
    //     e.preventDefault();
    // }else{
    //     e.returnValue = false;   // return false;
    // }

    var a = document.getElementsByTagName("a")[0];
    var form = document.getElementsByTagName("form")[0];

    a.onclick = function(e){
        var e = e || window.event;

        // 常规浏览器
        // e.preventDefault();

        // 低版本IE
        // e.returnValue = false;  // return false;
        // return false;

        if( e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;   // return false;
        }


        // alert(1111);
    }

    // form.onsubmit = function(){
    //     var e = e || window.event;
    //     if( e.preventDefault){
    //         e.preventDefault();
    //     }else{
    //         e.returnValue = false;   // return false;
    //     }
    //     // return false;
    // }

    //  阻止f5的默认刷新
    document.onkeydown = function(e){
        var e = e || window.event;
        var key = e.key;
        var keyCode = e.which || e.keyCode;
        console.log(key,keyCode);

        if(keyCode==116){  // F5
            if( e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;   // return false;
            }
        }else if(keyCode==122){ //F11
            if( e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;   // return false;
            }
        }else if(keyCode==123){//F12
            if( e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;   // return false;
            }
        }else if(e.ctrlKey&&e.shiftKey&&keyCode==73){
            if( e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;   // return false;
            }
        }else if(keyCode==8){//backspace
            if( e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;   // return false;
            }
        }
    }

    // 4. 阻止鼠标右键默认菜单
    var menu = document.getElementsByClassName("menu")[0];
    document.oncontextmenu = function(e){
        var e = e || window.event;

        // 鼠标事件
        // console.log(e);
        // console.log(e.button);
        if( e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;   // return false;
        }

        // 自定义菜单
        menu.style.display = "block";
        var x = e.clientX; 
        var y = e.clientY;
        
        menu.style.left = x + "px";
        menu.style.top = y + "px";
    }

    menu.onmousedown = function(e){
        var e = e || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }

    document.onmousedown = function(){
        menu.style.display = "none";
    }


</script>
</html>